<template>
  <UserCardList :userList="userList"/>
</template>

<script setup lang="ts">
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import myAxios from "../../plugins/myAxios.ts";
// 引入css
import 'vant/es/toast/style';
import 'vant/es/notify/style'
import qs from 'qs';
import {showSuccessToast, showFailToast} from 'vant';
import UserCardList from "../../global/UserCardList.vue";

const userList = ref([]);
const route = useRoute();
const {tags} = route.query;
onMounted(async () => {
  const userList_ = await myAxios.get('/user/search/tag', {
    params: {
      tagNameList: tags
    },
    paramsSerializer: params => {
      return qs.stringify(params, {indices: false})
    }
  })
      .then(res => {
        return res?.data;
      })
      .catch(err => {
        showFailToast('获取失败 ');
        console.log(err);
      })
  if (userList_) {
    userList_.forEach((user: any) => {
      if (user.tags) {
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userList_;
  }
})


</script>

<style scoped>

</style>